<template>
  <div class="detail_tab">
    <div
      class="detail_tab_item"
      :class="item.value[0] == homeState.matchDetail.activetab[0] && item.value[1] == homeState.matchDetail.activetab[1] ? 'detail_tab_item-active' : ''"
      v-for="item in homeState.matchDetail.tabs"
      :key="item.value" @click="homeStore.changeDetailactivetab(item.value)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script setup>
const { homeStore, homeState } = inject('HomeStore')
</script>

<style lang="scss" scoped>
.detail_tab {
  height: 60px;
  display: flex;
  align-items: center;

  .detail_tab_item {
    height: 32px;
    font-family: AlibabaPuHuiTi_2_85_;
    padding: 0 8px;
    line-height: 32px;
    cursor: pointer;
    margin-left: 12px;
    color: #999;
  }

  .detail_tab_item-active {
    background-color: #3711d8;
    color: #fff;
  }
}
</style>